<template>
  <div class="alert" @click="viewMsg">
    <el-tooltip content="消息中心" placement="top">
      <div v-if="isSoundEnable==1" class="el-icon-bell alert-icon"></div>
      <div v-else class="el-icon-close-notification alert-icon"></div>
    </el-tooltip>
    <template v-if="msgCount>0">
      <div v-if="msgCount <= 99" class="alert-num">{{msgCount}}</div>
      <div v-else class="alert-num" style="width: 28px">99+</div>
    </template>
    <audio v-if="isSoundEnable == 1" ref="audio" hidden src="@/assets/audio/msg.mp3"></audio>
    <el-dialog title="消息中心" :visible.sync="open" width="400px" append-to-body>
      <div style="padding: 10px 0">
        <el-switch v-model="isSoundEnable" :active-value="1" :inactive-value="0" active-text="开启声音提醒"
                   inactive-text="关闭声音提醒" @change="setSoundEnable">
        </el-switch>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="viewMore">查看消息</el-button>
        <el-button @click="open=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getConfigKey, setConfigKey} from '@/api/system/config'
  import {getMsgCount} from '@/api/app/msg/remind'
  import Bus from '@/utils/bus'

  export default {
    name: 'Notifications',
    components: {},
    data() {
      return {
        isSoundEnable: 0,
        msgCount: 0,
        open: false,
        form: {},
      }
    },
    created() {
      Bus.$on('msgRemind', this.parseWs)
      this.getSoundEnable()
      this.getMsgCount()
    },
    destroyed() {
      Bus.$off('msgRemind')
    },
    methods: {
      getMsgCount() {
        getMsgCount().then(res => {
          this.msgCount = res.data
        })
      },
      getSoundEnable() {
        getConfigKey('isSoundEnable').then(res => {
          this.isSoundEnable = parseInt(res.msg)
        })
      },
      setSoundEnable() {
        setConfigKey({
          configKey: 'isSoundEnable',
          configValue: this.isSoundEnable
        }).then(res => {
          this.msgSuccess('设置成功')
          this.getSoundEnable()
        })
        this.isSoundEnable = this.isSoundEnable == 1 ? 0 : 1
      },
      viewMsg() {
        this.open = true
      },
      parseWs(msg) {
        let data = msg.data
        if (data.count > this.msgCount && this.isSoundEnable == 1) {
          this.playAudio()
        }
        this.msgCount = data.count
      },
      viewMore() {
        this.$router.push({path: '/msg-remind'})
        this.open = false
      },
      playAudio() {
        this.$refs.audio.currentTime = 0
        this.$refs.audio.play()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .alert {
    display: inline-block;
    position: relative;
    cursor: pointer;

    .alert-icon {
      font-weight: bold;
      font-size: 25px;
      line-height: 50px;
    }

    .alert-num {
      position: absolute;
      top: 5px;
      right: 0;
      font-size: 10px;
      background-color: red;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #FFFFFF
    }
  }
</style>
